import React, { useContext, useState } from "react";

// ! 1、多个context
export const themes = {
    light: {
        foreground: "#000000",
        background: "#eeeeee"
    },
    dark: {
        foreground: "#ffffff",
        background: "#222222"
    }
};

const Text = React.createContext("text111");

const ThemeContext = React.createContext(themes.light);

export default function App() {
    const [us, setUs] = useState(themes.dark);
    const [tt, setTT] = useState("themes.dark");


    return (
        <ThemeContext.Provider value={us}>
            <Text.Provider value={tt}>
                <button onClick={() => setUs(themes.light)}>aaa</button>
                <button onClick={() => setTT("333333")}>bbb</button>
                <Toolbar />
            </Text.Provider>
        </ThemeContext.Provider>
    );
}

function Toolbar() {
    return (
        <div>
            <ThemedButton />
        </div>
    );
}

function ThemedButton() {
    const theme = useContext(ThemeContext);
    const a = useContext(Text);
    return (
        <button style={{ background: theme.background, color: theme.foreground }}>
            I am styled by theme context!
            {a}
        </button>
    );
}